<template>
  <div class="between-box table-top pd8 box-b">
    <div>
      <slot name="left">
      </slot>
    </div>
    <div>
      <slot name="right">
      </slot>
      <slot name="showUpLoadExcel">
        <el-button
          v-if="showUpLoadExcel"
          size="small" type="primary" icon="el-icon-upload2"
          @click="goExcel">
          {{uploadTitle}}
        </el-button>
      </slot>
      <!-- 导出excel  -->
      <slot name="showCheck">
        <el-button
          v-if="showCheck"
          size="small" type="primary" icon="el-icon-download"
          @click="exportExcelSelect">
          按勾选导出Excel
        </el-button>
      </slot>
      <slot name="showResult">
        <el-button
          v-if="showResult"
          size="small" type="primary" icon="el-icon-download"
          @click="exportExcel">
          按查询结果导出Excel
        </el-button>
      </slot>

      <ExportExcelCommon
        v-if="showRef"
        :ref="refCustom"
        :tableMoreList="tableMoreList"
        :tableMoreStr="tableMoreStr"
        :showRedList="showRedList"
        :showGreenList="showGreenList"
        :showOrangeList="showOrangeList"
        :customColor="customColor"
        :customGreen="customGreen"
        :customOrange="customOrange"
        :mergeName="mergeName"
        :showSummary="showSummary"
        :summaryList="summaryList"
        :isSubtotal="isSubtotal"
        :mergeCells="mergeCells"
        :sheetLast="sheetLast"
        :exportExcelInfo="exportExcelInfo"
        :tableData="tableAllData"
        :exportExcelArray="exportExcelArray"
        :exportExcelHead="exportExcelHead">

      </ExportExcelCommon>
    </div>

    <!-- 上传excel组件 -->
    <!--    <UploadExcel-->
    <!--      :onSuccess="onSuccess"-->
    <!--      :isShow="isShow"-->
    <!--      :accept="accept"-->
    <!--      :maxSize="maxSize">-->
    <!--    </UploadExcel>-->
    <UploadFile
      :uploadTitle="uploadTitle"
      :isShow="isShow"
      :upLoadRequest="upLoadRequest"
      :drag="true"
      :maxSize="10"
      :accept="accept"
      @uploadRequestSuccess="uploadRequestSuccess">
    </UploadFile>

  </div>
</template>

<script>
//上传excel
// import UploadExcel from "@/components/UploadExcel.vue"
import UploadFile from "@/components/UploadFile.vue"
//导出excel
import ExportExcelCommon from "@/components/ExportExcelCommon.vue"
export default {
  name: "table-top", // tabble顶部自定义模块
  props: {
    // 导出excel
    exportExcelInfo: {
      type: Object,
      default:()=>{
        return {}
      }
    },
    exportExcelArray: {
      type: Array,
      default:()=>{
        return []
      }
    },
    exportExcelHead: {
      type: Array,
      default:()=>{
        return []
      }
    },
    multipleSelection: {
      type: Array,
      default:()=>{
        return []
      }
    },
    formInline: {
      type: Object,
      default:()=>{
        return {}
      }
    },
    // 自定义myRef
    refCustom: {
      type: String,
      default: 'myChild'
    },
    // 导出数据接口
    exportExcelRequest: {
      type: String,
      default: ''
    },
    // 是否显示按钮
    showUpLoadExcel: {
      type: Boolean,
      default: false,
    },
    showCheck: {
      type: Boolean,
      default: true,
    },
    showResult: {
      type: Boolean,
      default: true,
    },
    showRef: {
      type: Boolean,
      default: true,
    },
    // 动态渲染数组
    tableMoreList: {
      type: Array,
      default:()=>{
        return []
      }
    },
    // 动态渲染数组名称
    tableMoreStr: {
      type: String,
      default: ''
    },
    // 是否显示总计
    showSummary: {
      type: Boolean,
      default: false
    },
    summaryList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 是否合并小格
    mergeCells: {
      type: Boolean,
      default: false
    },
    // 是否显示小计
    isSubtotal: {
      type: Boolean,
      default: false
    },
    // 表格列最后一列，有边框样式，手动去掉
    sheetLast: {
      type: String,
      default: ''
    },
    // 接受上传的文件类型
    accept: {
      type: String,
      default: '.xlsx,.doc,.docx'
      // default: '.xlsx,.doc,.docx,.pdf'
    },
    // 上传名称
    uploadTitle: {
      type: String,
      default: '导入excel表格'
    },
    // 最大上传兆数
    maxSize: {
      type: Number,
      default: 10,
    },
    // 更新报表上传接口
    upLoadRequest: {
      type: String,
      default: ''
    },
    // 合并小格名称
    mergeName: {
      type: String,
      default: ''
    },
    // 导出自定义字体颜色所属字段
    showRedList: {
      type: Array,
      default: () => {
        return []
      }
    },
    showOrangeList: {
      type: Array,
      default: () => {
        return []
      }
    },
    showGreenList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 导出自定义字体颜色
    customColor: {
      type: String,
      default: 'D63640'
    },
    customGreen: {
      type: String,
      default: '1AD96F'
    },
    customOrange: {
      type: String,
      default: 'f2b400'
    },
  },
  // 注册组件
  components: {
    //上传excel
    // UploadExcel,
    UploadFile,
    //导出excel
    ExportExcelCommon,
  },
  data(){
    return {
      isShow: false,
      //需要导出的table数据
      tableAllData: [],
      formInlineExcel: {
        page: 1,
        pagenum: 30,
      }
    }
  },
  created() {
    this.formInlineExcel = {
      ...this.formInline
    }
  },
  watch: {
    formInline: {
      handler() {
        if(!Object.is(this.formInlineExcel,this.formInline)){
          this.formInlineExcel = this.formInline
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //上传excel
    goExcel() {
      this.isShow = true;
    },
    onSuccess(e){
      this.$emit('onSuccess', e)
    },
    exportExcelSelect(){
      // this.$emit('exportExcelSelect')
      if(this.multipleSelection.length == 0){
        this.$message.error('请勾选操作项')
        return;
      }
      //将选中项传给this.tableAllData
      //测试数组导出
      this.tableAllData = this.multipleSelection
      console.log('this.tableAllData',this.tableAllData)
      //需要延时调导出方法，为了等待数据初始化到列表中
      setTimeout(()=>{
        this.$refs[this.refCustom].exportExcel();
      },500)
    },
    exportExcel(e){
      this.loading = true
      this.openFullScreen('加载中...');
      console.log('this.formInlineExcel', this.formInlineExcel)
      this.apiUrl[this.exportExcelRequest](this.formInlineExcel,"POST")
        .then(res => {
          const { data:{list=[],totalpage},code,msg } = res;
          if (code != 0) {
            this.closeFullScreen(this.openFullScreen());
            this.$message({
              type: 'info',
              message: msg
            })
          } else {
            if(this.formInlineExcel.page<=totalpage){
            // if(this.formInlineExcel.page<=2){
              this.tableAllData = this.tableAllData.concat(list)
              this.formInlineExcel.page += 1
              this.exportExcel()
            } else {
              this.loading = false
              console.log('加载全部完毕')
              this.closeFullScreen(this.openFullScreen());
              if(this.tableAllData&&this.tableAllData.length>0){
                setTimeout(()=>{
                  this.$refs[this.refCustom].exportExcel();
                },500)
              } else {
                this.$message({
                  type: 'error',
                  message: '导出列表不能为空'
                })
              }
            }
          }
        })
        .catch(err => {
          if(err&&err.isCancel) return
          this.closeFullScreen(this.openFullScreen());
          // this.$message.error('列表加载失败，请稍后再试！')
        })
    },
    // 上传文件
    uploadRequestSuccess(){
      this.$emit('uploadRequestSuccess')
    },

  }
}
</script>

<style lang="less" scoped>
// table顶部模块
.table-top{
  padding: 10px;
  box-sizing: border-box;
}

.table-top{
  border: 1px solid #EBEEF5;
  border-bottom: initial;
}
</style>
